<template>
	<div class="home">	
		<home-hearder></home-hearder>
		<swiper :swiperlist="swiperlist"></swiper>
		<icon :iconlist="iconlist"></icon>
		<location></location>
		<hot :hotlist="hotlist"></hot>
		<like :likeList="likeList"></like>
		<week></week>
		<foot></foot>
	</div>	
</template>
<script>
	import HomeHearder from './pages/hearder'
	import Swiper from './pages/swiper'
	import Icon from './pages/icon'
	import Location from './pages/location'
	import Hot from './pages/hot'
	import Like from './pages/like'
	import Week from './pages/week'
	import Foot from './pages/foot'
	import { mapState } from 'vuex'
	export default {
		data(){
			return{
				iconlist:[],
				swiperlist:[],
				hotlist:[],
				likeList:[]
			}
		},	
		computed:{
			...mapState(["city"])
		},
		mounted(){
			this.$http.get("/api/data/homedata.json").then((request)=>{
				var datalist = request.data.data
				datalist.forEach((item,index)=>{
					if(this.city === item.city){
						this.iconlist = item.iconlist
						this.swiperlist = item.swiperlist
						this.hotlist = item.hotlist
						this.likeList = item.likeList
					}
				})
			})
		},
		components:{
		  	HomeHearder,
		  	Swiper,
		  	Icon,
		  	Location,
		  	Hot,
		  	Like,
		  	Week,
		  	Foot
		}
	}
</script>
<style>
	.home{
		background-color: #f5f5f5;
	}
	.border-top::before{
		position: absolute;
		display: block;
		content:'';
		top: 0;
		width: 100%;
		height: .02rem;
		border-bottom: 1px solid #e0e0e0;
	}
	.border-right:before{
		position: absolute;
		display: block;
		content:'';
		right: 0;
		width:.02rem;
		height:  100%;
		border-left: 1px solid #e0e0e0;
	}
</style>	